<template>
  <el-form-item
    v-if="items.visible === true || items.visible === undefined"
    class="layout-item"
    :class="items.rules && labelPosition !== 'right' ? 'isNeeded' : '' "
    :label="items.label"
    :title="items.label"
    :prop="items.keyIndex"
  >
    <span v-if="items.type === 'content'" v-html="items.value" />
    <el-input
      v-if="items.type === 'input'"
      v-model="items.value"
      :style="{ width: items.inputWidth || '250px'}"
      :placeholder="items.placeholder"
      :type="items.inputType || ''"
      :size="items.size || 'small'"
      :maxlength="items.maxlength"
      :show-word-limit="items.maxlength ? true : false"
      clearable
      :disabled="items.disabled"
    />

    <el-select
      v-if="items.type === 'select'"
      v-model="items.value"
      :size="items.size || 'small'"
      :multiple="items.multiple || false"
      :collapse-tags="items.collapseTags || false"
      :disabled="items.disabled"
      clearable
      :filterable="items.filterable"
      :style="{ width: items.inputWidth || '250px'}"
      :placeholder="items.placeholder"
      @change="change"
    >
      <el-option
        v-for="ele in items.options"
        :key="ele.value"
        :label="ele.label"
        :value="ele.value"
      />
    </el-select>

    <el-switch
      v-if="items.type === 'switch'"
      v-model="items.value"
      style="display: block"
      :active-color="items.activeColor|| ''"
      :inactive-color="items.inactiveColor || ''"
      active-text="是"
      :size="items.size || 'small'"
      inactive-text="否"
      :disabled="items.disabled"
    />

    <el-input
      v-if="items.type === 'textarea'"
      v-model="items.value"
      :disabled="items.disabled"
      type="textarea"
      :rows="items.rows"
      :autosize="items.autosize ? items.autosize : null"
      :placeholder="items.placeholder"
      :style="{ width: items.inputWidth || '250px'}"
      :maxlength="items.maxlength"
      :size="items.size || 'small'"
      :show-word-limit="items.maxlength ? true : false"
    />

    <el-date-picker
      v-if="items.type === 'date'"
      v-model="items.value"
      :disabled="items.disabled"
      type="date"
      value-format="yyyy-MM-dd"
      placeholder="选择日期时间"
      :size="items.size || 'small'"
      :style="{ width: items.inputWidth || '250px'}"
      :default-time="items.defaultTime"
    />

    <el-date-picker
      v-if="items.type === 'datetime'"
      v-model="items.value"
      :disabled="items.disabled"
      type="datetime"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期时间"
      :size="items.size || 'small'"
      :style="{ width: items.inputWidth || '250px'}"
      :default-time="items.defaultTime"
    />

    <el-date-picker
      v-if="items.type === 'datetimerange'"
      v-model="items.value"
      :disabled="items.disabled"
      type="datetimerange"
      align="right"
      :value-format="'yyyy-MM-dd HH:mm:ss'"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :size="items.size || 'small'"
      :style="{ width: items.inputWidth || '250px'}"
      :default-time="items.defaultTime"
    />

    <el-date-picker
      v-if="items.type === 'daterange'"
      v-model="items.value"
      :disabled="items.disabled"
      type="daterange"
      align="right"
      :value-format="'yyyy-MM-dd'"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :size="items.size || 'small'"
      :style="{ width: items.inputWidth || '250px'}"
      :default-time="items.defaultTime"
    />

    <el-radio-group v-if="items.type === 'radio'" v-model="items.value" :disabled="items.disabled">
      <el-radio v-for="(ele, i) in items.options" :key="i" :label="ele.value">{{ ele.label }}</el-radio>
    </el-radio-group>

    <el-checkbox-group v-if="items.type === 'checkbox'" v-model="items.value" :disabled="items.disabled">
      <el-checkbox v-for="(ele, i) in items.options" :key="i" :label="ele.value" :disabled="ele.disabled">{{ ele.label }}</el-checkbox>
    </el-checkbox-group>
    <div v-if="items.type === 'uploadImg'">
      <ImageUpload key="imageUpload" v-model="items.value" :disabled="items.disabled" :unload-cover-style="items.style" :file-size="10" :size-tips="items.tips" :limit="1" />
    </div>
    <VideoUpload
      v-if="items.type === 'video'"
      v-model="items.value"
      :disabled="items.disabled"
      :is-show-tip="false"
      :limit="1"
      :file-size="items.size || 2048"
      :only-video="true"
    />
    <PdfUpload
      v-if="items.type === 'files'"
      v-model="items.value"
      :disabled="items.disabled"
      :is-show-tip="false"
      :file-type="['.pdf']"
      :limit="1"
      :file-size="items.size || 200"
    />
    <EditorCom
      v-if="items.type === 'edit'"
      ref="editor"
      v-model="items.value"
      :disabled="items.disabled"
      :height="items.height"
      :style="{ width: items.inputWidth || '800px'}"
    />
    <p v-if="items.type === 'editview'" :style="items.style" v-html="items.value" />
  </el-form-item>
</template>
<script>
import { getBaseHeader } from '@/utils/request'
import ImageUpload from '@/components/ImageUpload'
import PdfUpload from '@/components/PdfUpload'
import VideoUpload from '@/components/FileUpload'
import EditorCom from '@/components/Editor/newEdit.vue'

export default {
  name: 'Items',
  components: {
    ImageUpload,
    PdfUpload,
    VideoUpload,
    EditorCom
  },
  props: ['items', 'labelPosition'],
  data() {
    return {
      input: '',
      imageUrl: '',
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: getBaseHeader(),
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/admin-api/member/job/import-excel'
      }
    }
  },
  created() {
    console.log(this.labelPosition, 1000)
  },
  methods: {
    change() {
      console.log('改变了')
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 20

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log(response, '----返回结果')
      if (response.code !== 0) {
        this.$modal.msgError(response.msg)
        return
      }
      this.$refs.upload.clearFiles()
      this.upload.open = false
      this.upload.isUploading = false
      // 拼接提示语
      const data = response.data
      console.log(data, 1000)
    },
    // 上传报错，清除文件并关闭
    handleFileError() {
      this.$refs.upload.clearFiles()
      this.upload.open = false
      this.upload.isUploading = false
    }
  }
}
</script>
<style lang="scss">
    .form-group-content {
        .el-form-item__label {
            flex-shrink: 0;
        }
        .el-form-item__content {
            flex-shrink:inherit;
            // padding-top: 3px;
        }

        .isNeeded {
            .el-form-item__label {
                margin-left: -10px;
                margin-right: 10px;
            }
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .layout-item {
            display: flex;
            align-items: flex-start;
            display: flex;

            .el-form-item__label {
              flex-shrink: 0;
            }
        }
    }

</style>
<style  lang="scss" scoped>
    // .layout-content {
    //     display: flex;

    //     .layout-item {
    //         display: flex;
    //         align-items: flex-start;
    //         display: flex;
    //     }
    //     .layout-item >>> .el-form-item__label {
    //       flex-shrink: 0;
    //     }
    // }
</style>
